
// 归档
import { formatDate } from "@/utils";
import { useEffect } from "react";
import { ArchivesModelState, Link, useDispatch, useSelector } from "umi";
import Upperright from '@/components/rightcomp/upperright/upperright';
import RightLower from '@/components/rightcomp/rightlowerother/rightlowerother';

const Archives = () => {

  const dispatch = useDispatch()
  //归档列表渲染
  const archivesList = useSelector((state: { archives: ArchivesModelState }) => state.archives)

  useEffect(() => {
    //归档列表渲染
    dispatch({
      type: "archives/ArchivesList",
    })
  }, [])

  return <div className="container">
    <div className="_3tC3y9W6nEYVdAwGypNta9">
      {/* //左侧 */}
      <section className="_1r_Dp71aY9wU_PZOrRyGzl">
        <div className="_31uY1VinxiwKyG_XZXFpv">
          <div className="_1tJ6zWK6o_q8KafBWysrmZ">
            <p><span>归档</span></p>
            <p>共计 <span>{archivesList.archivesLength}</span>篇</p>
          </div>
          <div className="GIf9xHwpzxlxHcDyE8sCn">
            <h2>2022</h2>
            <div className="_172XrbegThYDU7WfEHTUpM">
              <h3>March</h3>
              <ul>{
                archivesList.archivesList.map(item => {
                  return <li className="_172XrbegThYDU7WfEHTUpMLi" key={item.id}> <Link key={item.id} to={`/article/${item.id}`}>
                    <span className="OTAyqb_MWljCg91UnBG5u">{formatDate(item.publishAt)}</span>
                    <span className="JxUmPoeJKqnfS58GvD3vz">{item.title}</span ><br />
                  </Link>
                  </li>
                })
              }</ul>
            </div>
          </div>
        </div>
      </section>
      {/* //右侧 */}
      <aside className="_3yp3HpYTQik_UvNquTL2uQ _2dyoSl4ynuBmhwRO6bebOZ">
        <div className="sticky">
          {/* // 推荐阅读 */}
          <Upperright></Upperright>
          {/* // 文章分类 */}
          <RightLower></RightLower>
        </div>
      </aside>
    </div >
  </div>
}

export default Archives;

